<template>
  <div class="app-container">
    <el-card>
      <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="keyWord"
          placeholder="请输入想要查询的信息"
          @keyup.enter.native.prevent="searchStudentByName"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchStudentByName"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="dialogAddVisible = true"
          icon="el-icon-plus"
          >添加</el-button
        >
        <el-dialog title="新增一个课程信息" :visible.sync="dialogAddVisible">
          <el-form @submit.native.prevent :model="studentInfo">
            <el-form-item label="学号">
              <el-input v-model="studentInfo.sId"></el-input>
            </el-form-item>
            <el-form-item label="学生名称">
              <el-input v-model="studentInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="studentInfo.sex" placeholder="请选择">
                <el-option value="男">男</el-option>
                <el-option value="女">女</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="studentInfo.age"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="studentInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
              <el-input v-model="studentInfo.telephone"></el-input>
            </el-form-item>
            <el-form-item label="所属院系">
              <el-select v-model="studentInfo.deptId" placeholder="请选择">
                <el-option
                  v-for="dept in depts"
                  :key="dept.deptId"
                  :label="dept.deptName"
                  :value="dept.deptId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStudentSubmit"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </el-form-item>
    </el-form>

    <!--student table-->
    <el-table
      v-loading="listLoading"
      :data="students"
      element-loading-text="Loading"
      stripe
      height="550"
      border
      fits
      highlight-current-row
    >
      <el-table-column align="center" label="学号" prop="sId" />
      <el-table-column label="学生名称" align="center">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.isEdit"
            v-model="row.name"
            class="edit-input"
            size="small"
          />
          <span v-else>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.isEdit"
            v-model="row.sex"
            class="edit-input"
            size="small"
          />
          <span v-else>{{ row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.isEdit"
            v-model="row.age"
            class="edit-input"
            size="small"
          />
          <span v-else>{{ row.age }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="200" align="center" prop="email">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.isEdit"
            v-model="row.email"
            class="edit-input"
            size="small"
          />
          <span v-else>{{ row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话号码" align="center" prop="telephone">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.isEdit"
            v-model="row.telephone"
            class="edit-input"
            size="small"
          />
          <span v-else>{{ row.telephone }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="所属院系"
        width="180"
        align="center"
        prop="deptName"
      >
        <template slot-scope="{ row }">
          <el-select v-if="row.isEdit" v-model="row.deptId" size="small">
            <el-option
              v-for="dept in depts"
              :key="dept.deptId"
              :label="dept.deptName"
              :value="dept.deptId"
            />
          </el-select>
          <span v-else>{{ row.deptName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" prop="count">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            circle
            style="margin-left: 0"
            v-show="!row.isEdit"
            @click="row.isEdit = !row.isEdit"
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            style="margin-left: 0"
            v-show="row.isEdit"
            size="small"
            @click="editOneStudent(row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            circle
            @click="deleteOneStudent(row.sId)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-card>
    
  </div>
</template>

<script>
import {
  getAllStudent,
  addOneStudent,
  updateOneStudent,
  deleteOneStudent,
  search,
} from "@/api/student";
export default {
  data() {
    return {
      students: null,
      depts: null,
      listLoading: true,
      keyWord: "",
      dialogAddVisible: false,
      studentInfo: {
        //学生信息
        sId: "",
        name: "",
        sex: "",
        age: "",
        email: "",
        telephone: "",
        deptId: "",
      },
    };
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getAllStudent().then(({ data }) => {
        this.students = data.students.map((v) => {
          this.$set(v, "isEdit", false);
          return v;
        });
        this.depts = data.deptList;
        this.listLoading = false;
      });
    },
    addStudentSubmit() {
      this.dialogAddVisible = false;
      addOneStudent(this.studentInfo).then((resp) => {
        this.$message({
          message: resp.msg,
          type: "success",
        });
        this.students.push(this.studentInfo);
      });
    },
    editOneStudent(row) {
      row.isEdit = false;
      updateOneStudent(row).then((resp) => {
        this.$message({
          message: resp.msg,
          type: "success",
        });
      });
    },
    deleteOneStudent(sId) {
      if (confirm("你确定要删除这条数据吗？"))
        deleteOneStudent(sId).then((resp) => {
          this.$message({
            message: resp.msg,
            type: "success",
          });
          this.students = this.students.filter(item=>{
            return item.sId != item.sId;
          })
        });
    },
    searchStudentByName() {
      search(this.keyWord).then((resp) => {
        this.students = resp.data.map((v) => {
          this.$set(v, "isEdit", false);
          return v;
        });
      });
    },
  },
  created() {
    this.fetchData();
  },
};
</script>
